<template>
    <div class="main">
        <h1 class="title">VV</h1>
        <van-form @submit="onSubmit" style="margin-top: 10%;font-size: 1rem">
            <van-cell-group inset>
                <van-field
                        v-model="username"
                        name="username"
                        label="账号"
                        placeholder="账号"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                        v-model="password"
                        type="password"
                        name="password"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                />
            </van-cell-group>


            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    登录
                </van-button>
            </div>
            <!--    跳转页    -->
            <div class="register-box">
                <router-link to="register" class="register-text">注册页</router-link>
            </div>

        </van-form>
    </div>

</template>

<script lang="ts" setup>
import {ref} from "vue";
import {loginFromType} from "../../type/login";
import {useLoginStore} from "../../store/login";

// 用户输入内容
const username = ref('');
const password = ref('');


// 实例化仓库
const loginStore = useLoginStore()

const onSubmit = (values: loginFromType) => {
    loginStore.login(values)
};
</script>

<style scoped lang="less">
//总体内容
.main {
  display: flex;
  //justify-content: center;
  flex-direction: column;
  align-items: center;

  //H1标签样式
  .title {
    color: #1989fa;
    margin-top: 20%;
    font-size: 3.5rem;
    font-weight: bold;
    font-family: Sounso-Undividedad;
    text-shadow: 3px 2px 9px #ccc;
  }

  //注册标签的样式
  .register-text {
    color: #1989fa;
    margin-left: 70%;
  }
}
</style>